<template>
  <n-h1>板块轮动强度（{{ period }}日）</n-h1>
  <n-radio-group v-model:value="period" @update:value="loadRank">
    <n-radio :value="1">今日</n-radio>
    <n-radio :value="5">5日</n-radio>
    <n-radio :value="20">20日</n-radio>
  </n-radio-group>
  <n-data-table :columns="cols" :data="list" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
const period = ref(5)
const list = ref([])
onMounted(async () => {
  const res = await fetch('/api/sector/rank?period=5&top=20')
  list.value = await res.json()
})
const cols = [
  { title: '行业代码', key: 'ind' },
  { title: 'RPS', key: 'rps', sorter: 'desc' },
  { title: '主力净流入(万)', key: 'money_flow' }
]

async function loadRank() {
  const res = await fetch(`/api/sector/rank?period=${period.value}&top=20`)
  list.value = await res.json()
}
loadRank()
</script>
